<template>
	<view style="width: 100%;height: 100%;">
		<!-- 头部 -->
		<view class="theme-container" style="position: relative;">
			<view :style="{height: sConf.tH+'px'}"></view>
			<view class="top-font-title"
				style="font-size: x-large;font-weight: bolder;padding: 35px 0;color: #fff;text-align: center;">
				{{title}}
			</view>
			<tn-tabs v-model="curTabs">
				<tn-tabs-item v-for="(item,index) in tabsData" :key="index" :title="item"></tn-tabs-item>
			</tn-tabs>
		</view>
		<view class="mainContent">

			<scroll-view scroll-y style="width: 100%;height: 80vh;padding: 5px 10px;">
				<template v-if="curTabs === 0 || curTabs === 1">
					<sub-card-card v-for="(item,index) in cardMoney" :key="index" :data="item"
						title="代金券"></sub-card-card>
				</template>
				<template v-if="curTabs === 0 || curTabs === 2">
					<sub-card-card v-for="(item,index) in cardGoods" :key="index" :data="item"
						title="兑换券"></sub-card-card>
				</template>
				<template v-if="curTabs === 0 || curTabs === 3">
					<sub-card-card v-for="(item,index) in cardLevel" :key="index" :data="item" :level="cardLevel"
						title="权益券"></sub-card-card>
				</template>
				<tn-empty
					v-if="curTabs === 0 && cardMoney.length === 0 && cardGoods.length===0  && cardLevel.length === 0"
					mode="coupon"></tn-empty>
				<tn-empty v-if="curTabs === 1 && cardMoney.length === 0 " mode="coupon"></tn-empty>
				<tn-empty v-if="curTabs === 2 && cardGoods.length === 0 " mode="coupon"></tn-empty>
				<tn-empty v-if="curTabs === 3 && cardLevel.length === 0 " mode="coupon"></tn-empty>
			</scroll-view>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">{{sConf.title}} •
			{{title}}</tn-navbar>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				title: '我的卡券',
				sConf: getApp().globalData,
				curTabs: 0,
				tabsData: ['全部', '代金券', '兑换券', '权益券'],
				levelData: [],
				cardMoney: [],
				cardGoods: [],
				cardLevel: [],
			}
		},
		onLoad() {
			this.loadLevelList();
			this.loadCardMoneyList();
			this.loadCardGoodsList();
			this.loadCardLevelsList();
		},
		onReady() {

		},
		methods: {
			/**
			 * 加载权益列表
			 */
			loadLevelList() {
				let host = this.sConf.host + '/weapps/staffLevel/'
				let token = this.sConf.token || '';
				let data = {
					status: 1,
					is_show: 1,
					ordering: 'level'
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载权益列表', res);
					this.levelData = res;
				})
			},
			/**
			 * 加载代金券
			 */
			loadCardMoneyList() {
				let host = this.sConf.host + '/weapps/myCard/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					status: 1,
					ordering: 'value'
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载代金券', res);
					this.cardMoney = res;
				})
			},
			/**
			 * 加载兑换券
			 */
			loadCardGoodsList() {
				let host = this.sConf.host + '/weapps/goodCard/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					status: 1,
					ordering: 'value'
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载兑换券', res);
					this.cardGoods = res;
				})
			},
			/**
			 * 加载权益券
			 */
			loadCardLevelsList() {
				let host = this.sConf.host + '/weapps/levelCard/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					status: 1
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载权益券', res);
					this.cardLevel = res;
				})
			},
		}
	}
</script>
<style lang="scss" scoped></style>